<template>
    <div style="text-align: center;position: relative;top: 100px">
        <h1>欢迎{{ sysUser.username }}来到首页</h1>
        <div style="margin: 20px">
            <el-button type="primary" @click="getUserInfo">查询用户信息</el-button>
            <el-button type="danger" @click="logout">退出登录</el-button>
        </div>
        <div style="width: 600px; height:100px;margin: 40px auto">
            <el-descriptions title="作者信息">
                <el-descriptions-item label="昵称">{{ sysUser.nickname }}</el-descriptions-item>
                <el-descriptions-item label="CSDN">
                    <el-link v-show="sysUser.url" :href=sysUser.url type="success">主页地址</el-link>
                </el-descriptions-item>
                <el-descriptions-item label="居住地">{{ sysUser.address }}</el-descriptions-item>
                <el-descriptions-item label="简介">
                    <el-tag size="small">{{ sysUser.text }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="联系qq">{{ sysUser.qq }}</el-descriptions-item>
            </el-descriptions>
        </div>

    </div>
</template>

<script>
    import {getUser} from "@/api/login";
    import Cookies from 'js-cookie'

    export default {
        name: "Index",
        data() {
            return {
                sysUser: {
                    username: '',
                    nickname: '',
                    qq: '',
                    address: '',
                    url: '',
                    text: ''
                }
            }
        },
        methods: {
            getUserInfo() {
                getUser().then(res => {
                    console.log(res)
                    this.sysUser.nickname = res.data.nickname
                    this.sysUser.address = res.data.address
                    this.sysUser.text = res.data.text
                    this.sysUser.qq = res.data.qq
                    this.sysUser.url = res.data.url
                }).catch(res=>{
                    console.log(res)
                    this.$message.error("没有权限")
                    this.$router.replace("/login")
                })

            },
            logout() {
                localStorage.clear()
                Cookies.remove("username")
                Cookies.remove("password")
                localStorage.clear()
                this.$router.replace("/login")
            },
        },
        created() {
            this.sysUser.username = Cookies.get("username")
        },
    }
</script>
<style scoped>

</style>
